<template>

  <div class="backstage-container">
    <div class="menus">
      <div class="header">
        <img :src="headImgUrl" alt="头像">
        <span class="username">昵称:{{adminStorage.nickname ? adminStorage.nickname :nickname }}</span>
      </div>
      <div class="menus-item" v-for="item in menus" :key="item.name" @click="toPage(item.href)">
        {{ item.name }}
      </div>
    </div>
    <div class="menuContent">
      <router-view></router-view>
    </div>
  </div>
  <div class="title">
    后台管理系统
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import {inject} from 'vue'
import {AdminStore} from '../../store/adminStore'
const adminStorage = AdminStore()
const dialog = inject('dialog')
const message = inject('message')
const router = useRouter()
// import { AdminStore } from '../../store/adminStore'
// const adminStore = AdminStore()
// 从本地存储读取头像
const headImgUrl = localStorage.getItem('headImgUrl')
const nickname = localStorage.getItem('username')
// console.log('头像', headImgUrl);

let menus = [
  { name: '文章管理', href: '/backstage/article' },
  { name: '分类管理', href: '/backstage/category' },
  { name: '退出', href: 'logout' }
]
const toPage = (href) => {
  if (href == 'logout') {
    dialog.warning({
      title: '警告',
      content: '确认安全退出吗',
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: () => {
        localStorage.clear();
        router.push('/login')
        message.success('已安全退出')
      },
      onNegativeClick: () => {
        message.error('已取消')
      }
    })
  } else {
    router.push(href)
  }
}
</script>

<style lang="scss" scoped>
.backstage-container {
  display: flex;
  color: #64676a;
  max-width: 1500px;
  margin: 0 auto;

  .menus {
    width: 20%;
    height: 100vh;
    background-color: #d9dfe5;

    .header {
      box-sizing: border-box;
      width: 100%;
      height: 100px;
      border: 1px solid;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-size: cover;
      }

      span {
        margin-top: 5px;
        color: #000;
      }
    }

    .menus-item {
      display: flex;
      cursor: pointer;
      height: 40px;
      border-bottom: 1px solid;
      justify-content: center;
      align-items: center;

      &:hover {
        color: #fd760e;
      }
    }
  }

  .menuContent {
    width: 100%;
    padding: 10px;
  }
}

.title {
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
  font-style: italic;
  font-size: 60px;
  color: rgba($color: #5b5a5a, $alpha: 0.7);
}
</style>